<template>
  <div>
    <content-header-wrapper />
    <a-card style="margin: 10px 0 0 0">
      <h2>{{ $route.meta.title }}</h2>
      <a-table
        :columns="columns"
        :data-source="data"
        :row-key="(record) => record.noticeId"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="showDetailModal(record.noticeId, record)">详情 </a>
          <a-divider type="vertical" />
          <a @click="compileModal(record.noticeId, record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="deleteModal(record.noticeId, record)">删除</a>
        </span>
      </a-table>
      <br />
      <a-modal
        v-model="visible"
        :confirm-loading="confirmLoading"
        title="信息提示框"
        @ok="submit"
        @cancel="handleCancel"
      >
        <p v-if="showDetail">{{ noticeExamples.noticeDetail }}</p>
        <p style="text-align: center; font-size: 20px" v-if="deleteNote">
          <a-layout-content>确认删除吗？</a-layout-content>
        </p>
        <a-form-model
          v-if="compile"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item label="标题">
            <a-input v-model="noticeExamples.noticeTitle" />
          </a-form-model-item>
          <a-form-model-item label="内容">
            <a-input v-model="noticeExamples.noticeDetail" type="textarea" />
          </a-form-model-item>
          <a-form-model-item label="发布人">
            <a-input v-model="noticeExamples.noticePublisher" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </a-card>
  </div>
</template>
<script>
import request from "@/utils/request";
import ContentHeaderWrapper from "../../components/ContentHeaderWrapper/ContentHeaderWrapper.vue";
const data = [];
const columns = [
  {
    title: "公告Id",
    dataIndex: "noticeId",
    key: "noticeId",
  },
  {
    title: "公告标题",
    dataIndex: "noticeTitle",
    key: "noticeTitle",
  },
  {
    title: "发布人",
    dataIndex: "noticePublisher",
    key: "noticePublisher",
  },
  {
    title: "发布时间",
    key: "createTime",
    dataIndex: "createTime",
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
  },
];
const noteUrl = {
  query: "/note/qry",
  upData: "/note/upData",
  delete: "/note/del",
};
export default {
  components: { ContentHeaderWrapper },
  name: "Notice",
  data() {
    return {
      visible: false,
      data: data,
      noticeExamples: {},
      showDetail: false,
      deleteNote: false,
      compile: false,
      labelCol: { span: 3 },
      wrapperCol: { span: 20 },
      confirmLoading: false,
      pagination: {
        //每页3条项目
        //自定义每页显示数目
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) => {
          console.log(current, pageSize);
          this.pageSize = pageSize;
        },
        //自定义每页显示项目的选项
        pageSizeOptions: ["10", "20", "50"],
      },
      loading: false,
      columns: columns,
    };
  },
  mounted() {
    this.fetch();
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.fetch({
        size: pagination.pageSize,
        page: pagination.current,
      });
    },
    fetch(params = {}) {
      console.log("params:", params);
      this.loading = true;
      request({
        url: noteUrl.query,
        method: "post",
        data: {
          currPage: params.size,
          currPage: params.page,
        },
        type: "json",
      }).then((data) => {
        const pagination = { ...this.pagination };
        // Read total count from server
        // pagination.total = data.totalCount;
        var noteData = data.data.data;
        pagination.total = noteData.total;
        this.loading = false;
        this.data = noteData.list;
        this.pagination = pagination;
      });
    },
    showDetailModal(a, b) {
      this.noticeExamples = b;
      this.visible = true;
      this.showDetail = true;
    },
    compileModal(a, b) {
      this.noticeExamples = b;
      this.visible = true;
      this.compile = true;
    },
    deleteModal(a, b) {
      this.noticeExamples = b;
      this.visible = true;
      this.deleteNote = true;
    },
    handleCancel(e) {
      this.noticeDetail = "";
      this.visible = false;
      this.showDetail = false;
      this.compile = false;
      this.deleteNote = false;
    },
    submit(e) {
      if (this.showDetail) {
        return this.handleCancel(e);
      } else if (this.compile) {
        this.upData(this.noticeExamples);
        this.confirmLoading = true;
        setTimeout(() => {
          this.visible = false;
          this.confirmLoading = false;
          this.handleCancel(e);
        }, 2000);
      } else if (this.deleteNote) {
        this.delete(this.noticeExamples);
        this.confirmLoading = true;
        setTimeout(() => {
          this.visible = false;
          this.confirmLoading = false;
          this.handleCancel(e);
        }, 2000);
      }
    },
    upData(notice) {
      request({
        url: noteUrl.upData,
        method: "post",
        data: notice,
        type: "json",
      }).then((data) => {
        this.$notification.open({
          message: "更新完成",
          icon: <a-icon type="smile" style="color: #108ee9" />,
        });
      });
    },
    delete(notice) {
      request({
        url: noteUrl.delete,
        method: "post",
        data: notice,
        type: "json",
      }).then((data) => {
        this.fetch({
          currPage: this.pagination.pageSize,
          currPage: this.pagination.current,
        });
        this.$notification.open({
          message: "删除成功",
          icon: <a-icon type="smile" style="color: #108ee9" />,
        });
      });
    },
  },
};
</script>
